<!doctype html>

<html>

<head>

    <meta charset="UTF-8">

    <title>探索HTML的奥秘 - 我的学习笔记</title>

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta name="description" content="这是一个关于HTML元数据、文本、图片、表格、表单及HTML5语义化标签应用的详细教程与示例页面。">

    <meta name="keywords" content="HTML, 元数据, 教程, 前端开发, Web开发, 语义化标签">

    <meta name="author" content="张三">

    <style>

        body { font-family: Arial, "Microsoft YaHei", sans-serif; margin: 20px; line-height:1.6; color:#222; }

        header { border-bottom: 1px solid #ddd; padding-bottom: 10px; margin-bottom: 20px; }

        .meta-list { background:#f8f8f8; padding:10px; border-radius:6px; }

        .meta-item { margin:6px 0; font-size:14px; }

        main { max-width:900px; }

        .preview { border:1px solid #e6e6e6; padding:12px; border-radius:6px; background:#fff; }

    </style>

</head>

<body>

    <header>

        <h1>探索HTML的奥秘</h1>

        <p>作者：张三 · 示例页面展示常用的 &lt;meta&gt; 元数据标签</p>

    </header>



    <main>

        <section>

            <h2>页面元数据（Meta tags）示例</h2>

            <div><strong>&lt;meta charset="UTF-8"&gt;：</strong>定义页面字符编码为 UTF-8，支持中文显示。</div>

            <div><strong>&lt;title&gt;…&lt;/title&gt;：</strong>浏览器标签页显示的标题，也是搜索结果中的标题候选。</div>

            <div><strong>&lt;meta name="viewport"&gt;：</strong>用于移动端响应式布局，确保页面在不同屏幕上按比例缩放。</div>

            <div><strong>&lt;meta name="description"&gt;：</strong>页面描述，搜索引擎在搜索结果中可能显示此文本，影响点击率（CTR）。</div>

            <div><strong>&lt;meta name="keywords"&gt;：</strong>关键词列表（现代搜索引擎通常忽略此项，但仍可用于内部检索或某些工具）。</div>

            <div><strong>&lt;meta name="author"&gt;：</strong>页面作者信息，便于记录与版权声明。</div>

        </section>



        <section style="margin-top:18px;">

            <h2>页面效果预览</h2>

            <div>

                <h3>探索HTML的奥秘 - 我的学习笔记</h3>

                <p>这是一个关于 HTML 元数据、文本、图片、表格、表单及 HTML5 语义化标签应用的示例页面。打开页面即可查看 meta 信息与页面内容。</p>

            </div>

        </section>

    </main>

</body>

</html>